<template>
<div style="height:100%;">
    <card style="margin-top:0;padding-bottom:54px;"  v-if="detail_data!=false">
      <img slot="header" src="http://www.lulushunche.com/data/upload/llsc/20160630/5774677729f1f.png" style="width:100%;display:block;">
      <div slot="content" class="card-padding">
        <group title="详细信息">
          <template v-for="item in detail_data">
            <cell :title="item.key" :value="item.value" primary="content" value-align="left">
              <div slot='title' style="width:120px;text-align:left;padding-right:0px">{{item.key}}</div>
            </cell>
          </template>
        </group>
      </div>
    </card>
</div>
</template>

<script>
import { Group, Cell, Card, XButton,AlertModule} from 'vux';

export default {
  components: {
    Group,
    Cell,
    Card,
    XButton,
    AlertModule
  },
  name: 'Detail',
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!',
      detail_data: false,
    }
  },
  beforeMount: function () {
      this.$store.commit('updateLoadingStatus', {isLoading: true})
      this.doReload();
  },
  methods:{
    goBack: function() {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    },
    phoneCall: function(phone){
      window.location.href = 'tel://' + phone;
    },
    doReload: function(){
      var that=this;
      this.$http.get(GV.ROOT + 'detail/ajax_detail.html',{
        params: {
          id: that.$route.params.id
        }
      }).then(function(response){
          // 响应成功回调
          console.log(response);
          if(response.data.err==1){
            AlertModule.show({
              title: '信息获取失败',
              content: response.data.msg,
              onHide () {
                that.goBack();
              }
            })
          }else{
            that.detail_data=response.data.data;
          }
          that.$store.commit('updateLoadingStatus', {isLoading: false})
          that.$nextTick(function(){});
      }, function(response){
          // 响应错误回调
          //router.push('/login')
      });
    }
  },
}
</script>

<style>

.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px
}
</style>
